<template>
  <div>
    <div class="ifBlank" v-if="allCount === 0" >
      <div>
         <img src="/static/img/space_orders.png" alt="">
        <p>您还没有订单哦！</p>
      </div>
    </div>
    <div class="contents" v-else >
      <div v-for="(v,i) in data" :key="i" class="order">
        <div style="width: 100vw;height: 10.67vw;line-height:6.67vw;border-bottom: 1px solid #f5f5f5">
          <div style="width: 92vw;height: 100%;margin: 0px auto;">
            <p style="color: #333;font-size: 13px;line-height: 10.33vw">订单号：{{v.order_no}}
              <span style="float: right;font-size: 12px;color: #ff4c50;">{{v.status}}</span>
            </p>
          </div>
        </div>
        <div class="sec" v-for="(v1,i1) in v.order_goods" :key="i1">
          <!--<router-link :to="'/detail?type=1&limit_id=0&group_id=0&join_id=0&goods_id='+v1.goods_id">&lt;!&ndash;商品详情&ndash;&gt;-->
          <!--<router-link :to="'/orderDetail?orderNum='+v.order_no">-->
          <a :href="'/pages/orderDetail/main?orderNum='+v.order_no">
            <img :src="v1.img" alt="">
            <div class="text">
              <p class="name">
                <span class="goodsName">{{v1.goods_name}}</span>
                <span class="types">￥{{v1.real_price}}</span>
              </p>
              <p class="size" style="magrin-top:1vw;">
                <span>规格:{{v1.spec_array}}</span>
                <span class="types" style="margin-right: -13vw">×{{v1.goods_nums}}</span>
              </p>
              <div class="seven" v-if="v1.is_seven_return == 0">七天无理由退换货</div>
            </div>
            <!--</router-link>-->
            <div class="clear"></div>
          </a>
        </div>
        <div style="color: #666;font-size: 12px;width: 100vw;height: 10.4vw;border-bottom: 1px solid rgba(245,245,245,.55);line-height: 10.4vw;">
          <div style="float: right;margin-right: 4vw">
            共{{v.goods_count}}件商品&nbsp;<span style="color: #333;">合计</span><span style="color: #ff4c50;">￥{{v.order_price}}</span>
          </div>
        </div>
        <div style="width: 100vw;height: 9.33vw;">
         <!-- <div class="btn">
            <button class="nOrder" v-if="v.operate.is_cancel == 1" v-on:click="cancelOrder(cancel,v.order_no)">取消订单</button>
            <button class="pay"  v-if="v.operate.is_to_pay == 1" @click="gotoPay(v)">付款 </button>
            <button class="pay" v-if="v.operate.is_comment == 1" @click="gotoApp(v)">评论 </button>
            <button class="pay" v-if="v.operate.is_confirm == 1" @click="querenOrder(queren,v.order_no)">确认收货 </button>
            <button class="pay" v-if="v.operate.is_deliver == 1" @click="gotoApp">查看物流 </button>
            <button class="nOrder" v-if="v.operate.is_delete == 1" v-on:click="deleteOrder(deletes,v.order_no)">删除订单 </button>
            &lt;!&ndash;<button class="nOrder" v-if="v.operate.is_delete == 1" v-on:click="cancelOrder(deletes,v.order_no)">删除订单 </button>&ndash;&gt;
          </div>-->
          <div class="btn">
            <button class="nOrder" v-if="v.operate.is_cancel === 1 && v.status !=='待发货'" @click="cancelOrder(1,v.order_no,cancel)">取消订单</button>
            <button class="pay"  v-if="v.operate.is_to_pay === 1" @click="gotoPay(v.payable_total,v.order_no)">付款</button>
            <button class="pay" v-if="v.operate.is_comment === 1" @click="gotoApp">评论 </button>
            <button class="pay" v-if="v.operate.is_confirm === 1" @click="cancelOrder(3,v.order_no,queren)">确认收货 </button>
            <button class="pay" v-if="v.operate.is_deliver === 1" @click="lookingUp(v.order_no,v.shipping.order_shipping_id)">查看物流</button>
            <button class="nOrder" v-if="v.operate.is_delete === 1" @click="cancelOrder(2,v.order_no,deletes)">删除订单 </button>
            <!--<button class="nOrder" v-if="v.operate.is_delete == 1" v-on:click="cancelOrder(deletes,v.order_no)">删除订单 </button>-->
          </div>
        </div>
      </div>
    </div>
    <div class="alertBox">
      <van-popup  :show="show"  @close="onClose" position="bottom" show-cancel-button
                  style="position:fixed;top: 35vw;overflow: hidden;border-radius: 2vw;">
        <alertPay :actual="orderPrice" :data="dataList" @close="close"
                  @submitOrder="submitOrder"  :order_sn="order_no" @isPay="isPay" v-if="!shows"></alertPay>
        <div v-else>
          <div style="text-align:center;padding-top: 50px" v-if="ispay">
            <img src="/static/img/mall_pay_suc@2x.png" alt="" style="width: 200px;height: 160px;">
            <p style="font-size: 16px;margin-top: 20px">支付成功</p>
            <button style="background: #ff4c50;padding: 5px 20px;color: #ffffff;margin-top: 20px;border-radius: 1.5vw" @click="toOrder">确定</button>
          </div>
          <div style="text-align:center;padding-top: 50px" v-else>
            <img src="/static/img/mall_pay_failure@2x.png" alt="" style="width: 200px;height: 160px">
            <p style="font-size: 16px;margin-top: 20px">支付失败</p>
            <button style="background: #ff4c50;padding: 5px 20px;color: #ffffff;margin-top: 20px;border-radius: 1.5vw" @click="close">确定</button>
          </div>
        </div>
      </van-popup>
      <web_view src="http://www.napin.com/download.html"></web_view>
    </div>
  </div>
</template>

<script>
  import Dialog from '@/../static/dist/dialog/dialog'
  //import { Dialog } from 'vant'
 import request from '@/actions/request.js'
  import alertPay from '@/components/order/alertPay'
  export default {
    name: "sawList",
    components:{
      alertPay
      //listAlertPay
    },
    props:["allCount","data","isNone",'active'],
    data(){
      return{
        queren:'确认收货',
        cancel:'取消订单',
        deletes:'删除订单',
        article_id:0,
        limit_ids:0,
        group_ids:0,
        join_ids:0,
        groupType:0,
        cart_id:0,
        show:false,
        shows:false,
        isGetMethod:true,
        ispay:true,
        dataList:[],
        order_no:'',
        payable_total:'',
        address_id:'',
        postscript:'',
        order_sn:'',
        orderPrice:'',
        finishOrder:false
      }
    },
    mounted(){

    },
    watch:{
      show(newVal,oldVal){
        if (newVal == false){
          if (finishOrder == true){
            wx.navigateTo({
              url:'../orderList/main?active=2'
            })
          }
        }
      }
    },
    onShow(){
      this.article_id = 0;
      this.limit_ids = 0;
      this.group_ids = 0;
      this.join_ids = 0;
      this.groupType = 0;
      this.cart_id = 0;
      this.show = false;
      this.shows = false;
      this.isGetMethod = true;
      this.ispay = true;
      this.dataList = [];
      this.order_no = '';
      this.payable_total = '';
      this.address_id = '';
      this.postscript = '';
      this.order_sn = '';
      this.orderPrice='';
      this.finishOrder = false
    },
    watch:{
      // '$route'(to, from) {
      //   this.$router.go(0);
      // }

    },
    methods:{
      lookingUp(sn,order_shipping_id){
        wx.navigateTo({url:'../express/main?order_sn='+sn+'&order_shipping_id='+order_shipping_id})
      },
      gotoPay(price,order_no){
        this.show = !this.show;
        let datas = wx.getStorageSync("returnArr");
        this.address_id = datas.data.address.address_id;
        this.order_no = order_no;
        console.log(this.order_no);
        this.orderPrice = price;
        if(this.isGetMethod){
          request.getListPayMethod('api/pay/getPayMethod','post',{},{},true,this);
        }
      },
      submitOrder(radio){
        request.getPay('api/shop/getPay','post',{
          pay_id:radio,
          order_sn:this.order_no,
          wx_openid:wx.getStorageSync('openid'),
        },{},true,this)
      },
      isPay(res){
        // this.show=!this.show;
        this.shows=true;
        this.ispay=res;
      },
      onClose() {
        this.show=false;
      },
      close(){
        this.show = !this.show;
      },
      toOrder(){
       /* this.$router.push({
          path: '/myOrder'+'?active='+2,
        })*/
        this.show=false;
      },
      gotoApp(){
        wx.showModal({
          content: '是否前往app操作',
          success: function(res) {
            if (res.confirm) {
              console.log('确定')
            } else if (res.cancel) {
              console.log('取消')
            }
          }
        })
      },
      cancelOrder(type,orderNum,text){
        wx.showModal({
          content: '是否确定'+text,
          success: function(res) {
            if (res.confirm) {
              request.cancelOrder('api/user/operateOrder','post',{
                order_no:orderNum,
                type:type
              },{},true,this);
               wx.navigateTo({
                 url: '../orderList/main',
               })
            } else if (res.cancel) {
              console.log('取消')
            }
          }
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .ifBlank{
    width: 100vw;
    height:91.5vh;
    padding-top: 20vh;
    background: #fff;
    div{
      width: 30vw;
      height: auto;
      margin: 0px auto;
    }
    img{
      width: 30vw;
      height: 30vw;
      margin: 0px auto;
    }
    p{
      width: 100%;
      color: #666;
      text-align: center;
      font-size:15px;
      white-space:nowrap;
    }
  }
  .contents{
    width: 100vw;
    height: auto;
    background: #fff;
    padding-top: 4vw;
    border-bottom: 3vw solid #f5f5f5;
    .order{
      border-bottom: 6px solid #f5f5f5;
    }
    .btn{
      float: right;
      .nOrder{
        border: 1px solid #666;
        color: #666;
      }
      .pay{
        border: 1px solid #ff4c50;
        color: #ff4c50;
      }
      button{
        font-size: 12px;
        width: 17vw;
        text-align: center;
        background: #fff;
        border-radius: 4vw;
        margin-right: 4vw;
        margin-top: 1.8vw;
        float: right;
        height: 6vw;
        line-height: 5.5vw;
        padding: 0 7px;
      }
    }
    .sec{
      width: 100vw;
      line-height:6.67vw;
      height: 27vw;
      border-bottom: 1px solid #f5f5f5;
      .text{
        float: right;
        padding-top: 3vw;
        width: 73vw;
        .seven{
          width: 32vw;
          height: 4.34vw;
          color: #ff4c50;
          border: 1px solid #ff4c50;
          border-radius: 4vw;
          line-height: 4vw;
          text-align: center;
          margin-top: 4vw;
          font-size: 11px;
        }
        p{
          height: 5vw;
          .types{
            float: right;
            color: #FF4C50;
            font-size: 13px;
            margin-right: 4vw;
          }
        }
        .size{
          font-size: 12px;
          color: #666;
        }
        .name{
          font-size: 13px;
          color: #333;

          .goodsName{
            width: 41vw;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: inline-block;
          }
        }
      }
      img{
        width: 20vw;
        height: 20vw;
        float: left;
        margin-left: 4vw;
        margin-top: 2.67vw;
        border-radius: 3px;
      }
    }
  }
  .confirmBox{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: rgba(0,0,0,.7);
    position: fixed;
    top: 0;
    left:0;
    z-index: 1000;
      .confirmTents{
        width: 70vw;
        height: 30vw;
        background: #fff;
        border-radius: 10px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        margin-top: 50vw;
        overflow: hidden;
        .btnBox{
          width: 100%;
          height: 13vw;
          margin-top: 14px;
          border-top: 1px solid #f5f5f5;
          line-height: 30px;
          .button{
            width:50%;
            height: 80%;
            display: inline-block;
            background:none;
            font-size: 16px;
            text-align: center;
          }
        }
          p{
            color: #333;
            font-size: 16px;
            padding: 18px;
          }
      }
  }
</style>
<style lang="scss">
.alertBox{
  .van-popup--bottom {
    width:73%;
    top:auto;
    bottom:43vw;
    border-radius: 3vw;
    right:auto;
    left:50%;
    overflow: hidden;
  }
  }
  .van-tabs__content{
    margin-top: 3vw !important;
  }
  .van-popup--bottom{
    width: 80vw;
  }
</style>
